<template>
  <div>
    <div class="warpper-boxs">
      <form-create 
      class="custom-select"
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
    </div>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="taskData"
      :activeTabKey="activeTabKey"
      @tabChange="callbackTab">
      <template #tabBarExtraContent>
        <a-button type="primary" v-action:exportBtn @click="expectTable()" icon="download">导出</a-button>
          <a-button icon="download" v-action:taskImportOfflineBtn @click="$refs.createTaskOfflineAdd.add();" class="ant-btn-warning">导入线下任务</a-button>
          <a-button type="primary" v-action:taskAddBtn @click="createAdd(true)" icon="plus">创建任务</a-button>
      </template>
      <a-table 
      :columns="table.columns" 
      :pagination="table.pagination" 
      rowKey="id"
      @change="handleTableChange"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      :scroll="{ x: true }"
      :data-source="table.loadData">
        <span slot="action" slot-scope="text, record">
            <a @click="toDetail(record)">详情</a>
            <a-divider type="vertical" v-action:taskEditBtn/>
            <span v-show="record.type === 1">
              <span v-show="record.status === 100">
                <a v-action:taskEditBtn @click="createAdd(record)">编辑</a>
                <a-divider v-action:taskSubmitBtn type="vertical" />
                <a-popconfirm
                    title="确认提交审核?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="taskSubmit(record)" >
                     <a v-action:taskSubmitBtn>提交</a>
                </a-popconfirm>
                <a-divider type="vertical" v-action:taskDelBtn />
                <a-popconfirm
                    title="确认删除?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="remove(record)" >
                     <a v-action:taskDelBtn>删除</a>
                </a-popconfirm>
              </span>
              <span v-show="record.status === 300">
                <a-popconfirm
                    title="确认完成任务？更新任务状态为已完成?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="closeTask(record)" >
                     <a v-action:taskCloseBtn>完成任务</a>
                </a-popconfirm>
              </span>
            </span>
            <span v-show="record.type === 2">
              <a-divider type="vertical" v-action:taskImportOfflineSettleBtn />
              <a v-action:taskImportOfflineSettleBtn @click="$refs.createTaskOfflineSettleAdd.add(record)">导入线下任务结算单</a>
            </span>
            <span v-show="record.status === 200">
              <a-divider type="vertical" v-action:taskVerifyBtn />
              <a v-action:taskVerifyBtn @click="$refs.createTaskApplyAdd.add(record)">审核</a>
            </span>
          </span>
          <span slot="taskId" slot-scope="text, record">
                 <a-popover title="任务编号" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.taskId}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.taskId | filterMore(7)}}</a-button>
                </a-popover>
            </span>
          <span slot="status" slot-scope="text, record">
              <a-tag color="orange" v-if="text===100">待提交</a-tag>
              <a-tag color="cyan" v-if="text===200">待审核</a-tag>
              <a-tag color="blue" v-if="text===300">已发布</a-tag>
              <a-tag color="green" v-if="text===400">已完成</a-tag>
              <a-tag color="red" v-if="text===500">已驳回</a-tag>
              <a-tag color="pink" v-if="text===600">已过期</a-tag>
          </span>
          <span slot="enterpriseName" slot-scope="text, record">
                 <a-popover title="关联企业" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.enterpriseName}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.enterpriseName | filterMore(10)}}</a-button>
                </a-popover>
            </span>
            <span slot="parkName" slot-scope="text, record">
                 <a-popover title="关联园区服务商" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.parkName}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.parkName | filterMore(10)}}</a-button>
                </a-popover>
            </span>
             <span slot="name" slot-scope="text, record">
                 <a-popover title="任务名称" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.name}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.name | filterMore(8)}}</a-button>
                </a-popover>
            </span>
      </a-table>
    </a-card>

    <task-add ref="createTaskAdd" @on-ok="loadTable(true)"/>
    <task-offline ref="createTaskOfflineAdd" @on-ok="loadTable(true)"/>
    <task-offline-settle ref="createTaskOfflineSettleAdd" @on-ok="loadTable(true)"/>
    <task-apply ref="createTaskApplyAdd" @on-ok="loadTable(true)"/>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { 
    allGetTaskList,
    allOnlineTaskDel,
    allOnlineTaskEnterpriseApply,
    allOnlineTaskParkApply,
    allOnlineTaskParkReject,
    allOnlineTaskComplete,
    allOnlineTaskDetail,
    exportTaskExcel
} from '@/api/manage/task'
import { sysBaseUpload } from '@/api/manage/base'
import {
    PARAMS_TASK,
    COLUMNS_TASK_ENTERPRISE,
    COLUMNS_TASK_PARK,
    COLUMNS_TASK_SYS,
    TASK_TAB_ENTERPRISE,
    TASK_TAB_PARK,
    OPTION_BLOCK,
    OPTION_INLINE
} from './form'
import 
  TaskAdd
from './task_add'
import 
  TaskOffline
from './task_offline'
import 
  TaskOfflineSettle
from './task_offline_settle'
import 
  TaskApply
from './task_apply'
export default {
  name: 'taskList',
  components: {
    TaskAdd,
    TaskOffline,
    TaskOfflineSettle,
    TaskApply
  },
  data () {
    return {
      activeTabKey:'',
      params:{
        fApi:{},
        rule:PARAMS_TASK,
        option:OPTION_INLINE
      },
      taskData:TASK_TAB_ENTERPRISE,
      table:{
        columns:COLUMNS_TASK_PARK,
        loadData:[],
        pagination:{
          current:1,
          pageSize: 10,
          total:0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      }
    }
  },
  filters: {
      filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
      }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.initColumus();
  },
  methods: {
    async initColumus(){
      if(this.userInfo.type === 2){
        this.taskData = TASK_TAB_ENTERPRISE;
        this.table.columns = COLUMNS_TASK_ENTERPRISE;
        this.$nextTick(()=>{
          this.params.fApi.hidden(false,'parkName');
          this.params.fApi.hidden(true,'enterpriseName');
        })
      }else if(this.userInfo.type === 3){
        this.taskData = TASK_TAB_PARK;
        this.table.columns = COLUMNS_TASK_PARK;
        this.$nextTick(()=>{
          this.params.fApi.hidden(true,'parkName');
        this.params.fApi.hidden(false,'enterpriseName');
        })
      }else if(this.userInfo.type === 1){
        this.taskData = TASK_TAB_PARK;
        this.table.columns = COLUMNS_TASK_SYS;
        this.$nextTick(()=>{
          this.params.fApi.hidden(false,'parkName');
        this.params.fApi.hidden(false,'enterpriseName');
        })
      }
      this.$nextTick(()=>{
        this.loadTable(true);
      })
    },
    async loadTable(flag){
       let params = this.params.fApi.formData();
       if(params.day.length > 0){
        params.publishStartTime = params.day[0];
        params.publishEndTime = params.day[1];
       }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.status = this.activeTabKey;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await allGetTaskList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    callbackTab(keys){
       this.activeTabKey = keys;
       this.loadTable(true);
    },
    async remove(item){
      let params = {id:item.id}
      const {code} = await allOnlineTaskDel(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    async expectTable() {
      let params = this.params.fApi.formData();
      params.status = this.activeTabKey;
      const data = await exportTaskExcel(params);
      let link = document.createElement('a');
      var blob = new Blob([data],{ type: 'application/vnd.ms-excel'});
      link.download = "任务管理明细.xls";
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    async createAdd(item){
      if(item === true){
        this.$refs.createTaskAdd.add(item);
      }else{
        const {code,data} = await allOnlineTaskDetail(item.id);
        if(code === '1'){
          data.id = item.id;
          this.$refs.createTaskAdd.add(data);
        }
      }
    },
    async taskSubmit(item){
      const that = this;
      let params = {id:item.id}
      const {code} = await allOnlineTaskEnterpriseApply(params);
      if(code === '1'){
        let parkName = '待 '+item.parkName+' 审核';
        this.$confirm({
          title: '操作成功',
          content: parkName,
          okType:'关闭',
          onOk() {
            that.loadTable(false);
          },
          onCancel() {
            that.loadTable(false);
          },
        });
      }
    },
    async closeTask(item){
      const that = this;
      let params = {id:item.id};
      const {code} = await allOnlineTaskComplete(params);
      if(code ==='1'){
        let taskName = '任务 '+item.name+' 状态已更新为已完成';
        this.$confirm({
          title: '操作成功',
          content: taskName,
          okText:'关闭',
          onOk() {
            that.loadTable(false);
          },
          onCancel() {
            that.loadTable(false);
          },
        });
      }
    },
    toDetail(item){
      this.$router.push({name:'applicationTaskDetailCode',query:{id:item.id,taskId:item.taskId,flag:'applicationTaskCode'}});
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
<style>
 .table-striped td {
    background-color: #fafafa !important;
}
</style>



